<template>
  <BKModal
    v-model="visible"
    title="已分配的用户"
    width="60%"
    height="60%"
  >
    <BKTable
      :columns="columns"
      :data="tableData"
      size="small"
      :has-pager="false"
      class="p-a-mini"
    >
      <template #toolbarLeft>
        <el-button
          type="primary"
          size="small"
          @click="addUser"
        >
          新增
        </el-button>
      </template>
    </BKTable>
    <AddModal
      ref="add"
      @confirm="confirmAddMembers"
    />
  </BKModal>
</template>

<script>
import AddModal from './add-member-modal.vue'
export default {
  name: 'UserListModal',
  data () {
    return {
      visible: false,
      roleId: '',
      columns: [
        { title: '所属部门', field: 'DEPT_ID_TEXT' },
        { title: '用户昵称', field: 'NICK_NAME' },
        { title: '用户名', field: 'USER_NAME' },
        {
          title: '操作',
          width: 80,
          slots: {
            default: ({ row }) => {
              return [
                <div class="operation-icon-buttons">
                  <i class="el-icon-delete" title="删除" onClick={() => { this.removeRow(row) }}></i>
                </div>
              ]
            }
          }
        }
      ],
      tableData: []
    }
  },
  components: {
    AddModal
  },
  methods: {
    show (roleId) {
      this.roleId = roleId
      this.refresh()
      this.visible = true
    },
    async refresh () {
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        appId: 'watf',
        bzCode: 'WATF',
        metaSet: 'WATF_B_SYS_ROLE',
        methodCode: 'getUser',
        methodParams: { ROLE_ID: this.roleId }
      })
      this.tableData = rows
    },
    addUser () {
      this.$nextTick(() => {
        this.$refs.add.show()
      })
    },
    async confirmAddMembers (newMembers) {
      await this.$request.singleTableOperation({
        metaSet: 'WATF_B_SYS_USER_ROLE',
        methodCode: 'batch',
        appId: 'watf',
        bzCode: 'WATF',
        methodParams: {
          batchParam: newMembers.map(r => {
            return {
              ROLE_ID: this.roleId,
              USER_ID: r.USER_ID
            }
          })
        }
      })
      this.$message.success('操作成功！')
      this.$refs.add.hide()
      this.refresh()
    },
    removeRow (row) {
      this.$confirm('请确认是否移除该用户', '提示', { type: 'warnin' }).then(async () => {
        await this.$request.singleTableOperation({
          appId: 'watf',
          bzCode: 'WATF',
          methodCode: 'delete',
          metaSet: 'WATF_B_SYS_USER_ROLE',
          methodParams: {
            ROLE_ID: this.roleId,
            USER_ID: row.USER_ID
          }
        })
        this.$message.success('操作成功！')
        this.refresh()
      })
    }
  }
}
</script>
